html,body {
    height: 100%;
}
ul,li,a{
    text-decoration: none;
    list-style: none;
}
.container {
    max-width: 640px;
    min-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    // background-color: pink;
    margin: 0 auto;
    .top{
        display: flex;
        height: 50px;
        width: 100%;
        background-color: #006699;
        padding: 0 10px;
        span{
            color: white;
            i{
                line-height: 50px;
            }
        }
        .top-left{
            float: left;

        }
        h4{
            flex: 1;
            line-height: 50px;
            text-align: center;
            margin: 0;
            color: white;

        }
        .top-right {
            float: right;

        }
    }

    .bottom{
        height: 60px;
        background-color: #006699;
        ul{
            display: flex;
            margin: 0;
            padding: 0;
            height: 100%;
            li{
                flex: 1;
                height: 100%;
               
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    padding-top: 5px;
                    p{
                        margin-bottom: 5px;
                        color: white;
                    }
                }
            }
            li .current{
                p {
                    color: orange;
                }
            }
        }
    }
}